<!--首页-->
<template>
  <div>
    <div id="index">
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/adminIndex' }">首页</el-breadcrumb-item>
      </el-breadcrumb>
      <el-space wrap :size="20" style="margin-bottom: 10px;width: 90%;text-align: left">
        <el-card shadow="hover" v-for="t in formDatas" :body-style="{ padding: '0px'}" style="width: 250px;border-radius: 20px">
          <el-image :src="'http://127.0.0.1:3000/'+ t.path"  fit="fill" style="height: 110px;width: 100%"/>
          <div style="padding: 5px">
            <span>{{ t.name }}</span>
            <!-- 弹窗按钮 -->
            <div class="bottom">
              <span>{{ t.detail }}</span>
              <el-button type="text" icon="more-filled" style="color: black" v-on:click="dialog(t)"/>
            </div>
          </div>
        </el-card>
      </el-space>

      <el-dialog title="项目详情" v-model="dialogFormVisible" width="35%" center>
        <el-form :model="form" label-position="top" style="display: inline-block">
          <el-form-item label="项目名称">
            <el-input v-model="form.name" disabled/>
          </el-form-item>
          <el-form-item label="项目类型">
            <el-input v-model="form.type" disabled/>
          </el-form-item>
          <el-form-item label="项目概述">
            <el-input type="textarea" v-model="form.detail" disabled resize="none"
                      :autosize="{ minRows: 8, maxRows: 8 }"/>
          </el-form-item>
          <el-form-item label="申报条件">
            <el-input v-model="form.condition" disabled type="textarea" resize="none"
                      :autosize="{ minRows: 8, maxRows: 8 }"/>
          </el-form-item>

          <el-form-item label="项目要求">
            <el-input v-model="form.require" disabled type="textarea" resize="none"
                      :autosize="{ minRows: 8, maxRows: 8 }"/>
          </el-form-item>

          <el-form-item label="申报时间">
            <el-date-picker
                v-model="form.time"
                type="daterange"
                range-separator="To"
                disabled
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[1, 3, 5, 10]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="justify-content: center;"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";

export default {
  data() {
    return {
      formDatas: {},
      form: ({
        id: '',
        name: '',
        type:'',
        detail: '',
        condition: '',
        time: '',
        require: '',
      }),
      dialogFormVisible: false,
      currentPage: 1,
      pageSize: 5,
      total: 10,
      small: false,
      background: true,
      disabled: false,
    };
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSizeChange(val) {
      axios.post("/item", {
        page: this.currentPage,
        pageSize: val,
      }).then((res) => {
        let r = res.data;
        this.total = r.total;
        this.formDatas = r.datas;
      }).catch((err) => {
        console.log(err);
      });
    },
    handleCurrentChange(val) {
      axios.post("/item", {
        page: val,
        pageSize: this.pageSize,
      }).then((res) => {
        let r = res.data;
        this.total = r.total;
        this.formDatas = r.datas;
      }).catch((err) => {
        console.log(err);
      });
    },
    dialog: function (t) {
      t.starttime = moment(String(t.starttime)).format('YYYY-MM-DD hh:mm:ss')
      t.endtime = moment(String(t.endtime)).format('YYYY-MM-DD hh:mm:ss')
      this.form = t
      let time = []
      time.push(t.starttime)
      time.push(t.endtime)
      this.form.time = time
      this.dialogFormVisible = true
    },
  },
  mounted() {
    this.handleCurrentChange(1);
  },
  watch: {
    $route: "handleCurrentChange",
  },
};
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom span {
  font-size: 13px;
  color: #999;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#index{text-align: center}
</style>
